<template>
	<div class="layout">
		<router-view class="content"/>
		<Tabbar v-model="active" @change="menuSelect">
			<TabbarItem icon="home-o">首页</TabbarItem>
			<TabbarItem icon="diamond-o">VIP</TabbarItem>
			<TabbarItem icon="user-o">我的</TabbarItem>
		</Tabbar>
	
	</div>
</template>
<script>
  import {getToken} from '@/libs/util'
  import {Tabbar, TabbarItem} from 'vant';

  export default {
    components: {
      Tabbar,
      TabbarItem
    },
    data() {
      return {
        currentPath: '',
        active: 0,
        theme3: 'dark'
      };
    },
    created() {
      this.currentPath = this.$route.name;
      this.active = this.getRouteIndex(this.currentPath);
    },
    watch: {
      // 监听相同路由下参数变化的时候，从而实现异步刷新
      '$route'(to, from) {
        // 做一些路由变化的响应
        this.active = this.getRouteIndex(to.name);
      }
    },
    methods: {
      getRouteIndex(name) {
        let index = 0;
        switch (name) {
          case 'home':
            index = 0;
            this.$router.push({name: 'home'});
            break;
          case 'vip':
            index = 1;
            this.$router.push({name: 'vip'});
            break;
          case 'my':
            index = 2;
            this.$router.push({name: 'my'});
            break;
          default:
            index = 0;
            this.$router.push({name: 'home'});
            break;
        }
        return index;
      },
      menuSelect(menu) {
        switch (menu) {
          case 0:
            this.currentPath = 'home';
            this.$router.push({name: 'home'});
            break;
          case 1:
            this.currentPath = 'vip';
            this.$router.push({name: 'vip'});
            break;
          case 2:
            this.currentPath = 'my';
            this.$router.push({name: 'my'});
            break;
        }
      }
    }
  };
</script>
<style scoped lang="less">
	.layout {
		height: 100vh;
		padding-bottom: 50px;
		display: flex;
		flex-direction: column;
	}
	
	.content {
		flex-grow: 1;
	}

</style>
<style lang="less">
	.title-nav {
		background-color: #0a73ab;
	}
	
	.van-nav-bar__title {
		color: white !important;
	}
</style>